<template>
  <div>
    <el-input v-model="inputId" placeholder="请输Id" style="width: 18%;"></el-input>
    <el-input v-model="inputName" placeholder="请输入Name" style="width: 18%;"></el-input>
    <el-input v-model="inputMold" placeholder="请输入Mold" style="width: 18%;"></el-input>
    <el-input v-model="inputMoldName" placeholder="请输入MoldName" style="width: 18%;"></el-input>
    <el-button type="primary" @click="quit()" style="width: 17%; float: right;">退出</el-button>
    <el-button type="primary" @click="search()" style="width: 17%; float: right;">查询</el-button>
    <el-button type="primary" @click="add()" style="width: 17%; float: left;">添加房间</el-button>
    <div class="block">
      <el-date-picker
          v-model="selectDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
      </el-date-picker>
    </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="Id"
          label="Id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="Name"
          label="Name"
          width="100">
      </el-table-column>
      <el-table-column
          prop="Mold"
          label="Mold"
          width="80">
      </el-table-column>
      <el-table-column
          prop="MoldName"
          label="MoldName"
          width="100">
      </el-table-column>
      <el-table-column prop="Picture" label="Picture" width="200" >
        <!-- 图片的显示 -->
        <template slot-scope="scope">
          <img :src="scope.row.Picture" width="150" height="150" />
        </template>
      </el-table-column>
      <el-table-column
          prop="CreatedAt"
          label="CreatedAt"
          width="180">
      </el-table-column>
      <el-table-column
          prop="UpdatedAt"
          label="UpdatedAt"
          width="180">
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="out(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="viewReport(scope.row)" type="text" size="small">查看报告</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    <el-pagination-->
<!--        background-->
<!--        layout="prev, pager, next"-->
<!--        page-size="3"-->
<!--        :total="total"-->
<!--        @current-change="page">-->
<!--    </el-pagination>-->

    <div class="block" style="float: right;">
      <el-pagination
          @size-change="size"
          :page-sizes="[3, 4, 5]"
          :page-size="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="page">
      </el-pagination>
    </div>

  </div>
</template>

<script>
let pageSize = '3'
export default {
  methods: {
    quit(){
      localStorage.clear()
      window.location.reload()
      // this.$router.push('/');
    },

    search(){
      var id = this.inputId
      if (id == ""){
        id = "0"
      }

      var formData = new FormData();
      formData.append("name", this.inputName);
      formData.append("moldName", this.inputMoldName);
      formData.append("mold", this.inputMold);
      if (this.selectDate) {
        formData.append("startTime", this.selectDate[0] + ' 00:00:00');
        formData.append("endTime", this.selectDate[1] + ' 00:00:00');
      }

      const _this = this
      axios.post('http://10.10.10.100:3400/filed/queryFiledAll/1/'+pageSize+'/'+id, formData, {
        headers: { "Content-Type": "multipart/form-data "}
      }).then(function(resp){
          _this.tableData = resp.data.data.rows
          _this.total = resp.data.data.total
      })
    },

    add() {
      this.$router.push('/addRoom');
    },

    update(row) {
      this.$router.push({
        path:'/updateRoom',
        query:{
          id:row.Id
        },
      });
    },

    out(row){
      const _this = this
      axios.post('http://10.10.10.100:3400/filed/deleteFiledById?id='+row.Id, null, {
        headers: { "Content-Type": "multipart/form-data "}
      }).then(function(resp){
        if (resp.data.code == 200){
          _this.$alert('删除成功', '消息', {
            confirmButtonText: '确定',
            callback: action => {
              window.location.reload()
            }
          });
        }
      })
    },

    viewReport(row){
      window.open('http://10.10.10.100:3400/filed/viewReportById?id='+row.Id);
    },

    size(pageSizeTem) {
      var id = this.inputId
      if (id == ""){
        id = "0"
      }

      var formData = new FormData();
      formData.append("name", this.inputName);
      formData.append("moldName", this.inputMoldName);
      formData.append("mold", this.inputMold);
      if (this.selectDate) {
        formData.append("startTime", this.selectDate[0] + ' 00:00:00');
        formData.append("endTime", this.selectDate[1] + ' 00:00:00');
      }

      let pageNoTem = null
      if (this.page_no != ""){
        pageNoTem = this.page_no
      }

      pageSize = pageSizeTem+''
      const _this = this
      axios.post('http://10.10.10.100:3400/filed/queryFiledAll/'+pageNoTem+'/'+pageSize+'/'+id, formData,{
        headers: { "Content-Type": "multipart/form-data "}
      }).then(function(resp){
          _this.tableData = resp.data.data.rows
          _this.total = resp.data.data.total
      })
    },
    page(pageNo) {
      var id = this.inputId
      if (id == ""){
        id = "0"
      }

      var formData = new FormData();
      formData.append("name", this.inputName);
      formData.append("moldName", this.inputMoldName);
      formData.append("mold", this.inputMold);
      if (this.selectDate) {
        formData.append("startTime", this.selectDate[0] + ' 00:00:00');
        formData.append("endTime", this.selectDate[1] + ' 00:00:00');
      }

      const _this = this
      axios.post('http://10.10.10.100:3400/filed/queryFiledAll/'+pageNo+'/'+pageSize+'/'+id, formData, {
        headers: { "Content-Type": "multipart/form-data "}
      }).then(function(resp){
          _this.tableData = resp.data.data.rows
          _this.total = resp.data.data.total
      })

      this.page_no = pageNo
    }
  },

  name: "QueryRoomInfo",
  data() {
    return {
      inputId: "",
      inputName: "",
      inputMoldName: "",
      inputMold: "",
      total: null,
      tableData: [],
      selectDate:""
    }
  },

  created() {
    // eslint-disable-next-line no-undef
    const _this = this
    axios.post('http://10.10.10.100:3400/filed/queryFiledAll/1/3/0').then(function(resp){
        _this.tableData = resp.data.data.rows
        _this.total = resp.data.data.total
    })

    // axios.post('http://10.10.10.100:1397/statisticalActivities').then(function(resp){
    //   console.log("data：", resp.data.data)
    // })
    //
    // axios.get('http://10.10.10.100:1650/queryMenuByRoleIdAsyncWait/98e6a11a-5fb4-11ec-b06e-1c697ac9cfe3').then(function(resp){
    //   console.log("data：", resp.data.data)
    // })

  }
}
</script>